<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <el-input
          v-model="query.name"
          placeholder="小区名"
          class="handle-input mr10"
          @keyup.native.enter="handleSearch()"
        ></el-input>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column
          prop="index"
          label="排序"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="subDistrict"
          label="街道"
        ></el-table-column>

        <el-table-column
          align="center"
          prop="communityName"
          label="社区"
        ></el-table-column>

        <el-table-column
          align="center"
          prop="villageName"
          label="小区"
        ></el-table-column>

        <el-table-column
          align="center"
          prop="cityMan"
          label="城管户室总数"
        ></el-table-column>

        <el-table-column
          align="center"
          prop="bn"
          label="邦凝户室总数"
        ></el-table-column>

        <el-table-column
          align="center"
          prop="bnLack"
          label="城管比邦凝多的户数"
        ></el-table-column>

        <el-table-column
          align="center"
          prop="cityVacancy"
          label="城管空置户"
        ></el-table-column>

        <el-table-column
          align="center"
          prop="bnVacancy"
          label="邦凝空置户"
        ></el-table-column>

        <el-table-column
          align="center"
          prop="vacancyLack"
          label="城管空置户比邦凝多的数量"
        ></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total,sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 20, 30]"
          @size-change="handleSizeChange"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "urbanManageHouseholdContrast",
  data() {
    return {
      query: {
        name: "",
        pageIndex: 1,
        pageSize: 20,
      },
      tableData: [],
      pageTotal: 0,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      this.$axios
        .get("/village/citydistrict/page", {
          params: {
            page: this.query.pageIndex,
            limit: this.query.pageSize,
            name: this.query.name,
          },
        })
        .then(({ data: res }) => {
          console.log(res);
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.tableData = res.data.list;
          this.tableData.map((item, index) => {
            var pageIndex = this.query.pageIndex;
            item.index = index + 1 + (pageIndex - 1) * this.query.pageSize;
          });
          this.pageTotal = res.data.total;
        })
        .catch((err) => {});
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      this.getData();
    },

    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData();
    },
    handleSizeChange(val) {
      this.$set(this.query, "pageSize", val);
      this.getData();
    },
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: auto;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
